<template>
  <div class="concentration">
    <div class="coupons" v-if="couponList.length> 0">
      <template v-for="(item,index) in couponList">
        <div class="list" :key="index">
          <span class="m-price">{{item.coupon_price}}</span>
          <span class="info">满{{item.full_coupon_price}}可用</span>
          <span class="text" @click="collectCoupon(item.id)">领<br>取</span>
        </div>
      </template>
    </div>
    <div class="hot-title">热卖商品</div>
    <div class="product-list store-list">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'concentration',
  data () {
    return {
      couponList: []
    };
  },
  created () {
    this.storeCouponList();
  },
  methods: {
    // 领取优惠劵
    collectCoupon (id) {
      this.$toast.loading({ duration: 0 });
      this.$API.user.collectCoupon({ id }).then(res => {
        if (!res.code) {
          this.storeCouponList();// 刷新列表
        }
        setTimeout(() => {
          this.$toast(res.message);
        }, 500);
      });
    },
    // 店铺优惠劵
    storeCouponList () {
      this.$API.store.storeCouponList({ sid: this.$route.query.id }, 'add').then(res => {
        if (!res.code) {
          this.couponList = res.data;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.concentration {
  margin-top: 20px;
  .coupons {
    overflow-x: auto;
    white-space: nowrap;
    background-color: #fff;
    padding: 25px;
    .list {
      width: 240px;
      height: 110px;
      display: inline-block;
      background-image: url('/static/img/icon-store-coupon-bg.png');
      background-repeat: no-repeat;
      background-size: contain;
      margin-right: 10px;
      position: relative;
      .m-price {
        font-size: 42px;
        color: #ff0034;
        margin: 10px 0 0 40px;
        font-weight: 800;
        &::before {
          font-size: 26px;
        }
      }
      .info {
        display: block;
        color: #ff0034;
        text-align: center;
        font-size: 20px;
        padding-right: 70px;
      }
      .text {
        display: block;
        color: #ff0034;
        position: absolute;
        top: 20px;
        font-size: 24px;
        right: 20px;
        font-weight: 800;
      }
    }
  }
  .hot-title {
    font-size: 34px;
    color: #000;
    padding: 20px 25px 0;
  }
}
</style>
